.inula-datepicker {
  position: relative;
}

/* 输入框样式 */
.inula-datepicker-input-container {
  width: 112px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.15);

  padding: 0 11px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  font-size: 14px;
  line-height: 32px;
}

.inula-datepicker-input-container:hover {
  border-color: #1677ff;
}

.inula-datepicker-input-container:focus-within {
  border-color: #1677ff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.2);
}

.inula-datepicker-input {
  height: 24px;
  width: 70%;
  background-color: transparent;
  border: none;

  font-size: 14px;
  line-height: 24px;
}

.inula-datepicker-input:focus {
  outline: none;
  border: none;
}

.inula-datepicker-input-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.inula-datepicker-input-icon .clear {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.45);

  display: flex;
  justify-content: center;
  align-items: center;

  cursor: pointer;
}

.inula-datepicker-input-hover-value {
  color: rgba(0, 0, 0, 0.25);
}

/* 禁用态 */
.inula-datepicker-input-container-disabled,
.inula-datepicker-input-container-disabled:hover {
  background-color: #f5f5f5;
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
}

.inula-datepicker-input-container-disabled .inula-datepicker-input:hover {
  cursor: not-allowed;
}

.icon-disabled .inula-icon:hover {
  cursor: not-allowed !important;
}

/* 小尺寸 */
.inula-datepicker-input-container-small {
  width: 112px;
  height: 24px;
  font-size: 12px;
  line-height: 20px;
  padding: 0 7px;

  font-size: 12px;
}

.inula-datepicker-input-small {
  height: 18px;

  font-size: 12px;
  line-height: 12px;
}

.inula-datepicker-input-container-small
  .inula-datepicker-input-icon
  .inula-icon {
  font-size: 12px !important;
}

.inula-datepicker-input-container-small .inula-datepicker-input-icon .clear {
  width: 12px;
  height: 12px;
}

.inula-datepicker-input-container-small .inula-datepicker-input-icon {
  top: 13px;
}

/* 大尺寸 */
.inula-datepicker-input-container-large {
  width: 112px;
  height: 24px;
  font-size: 16px;
  line-height: 32px;
  padding: 7px 16px;

  font-size: 16px;
}

.inula-datepicker-input-large {
  height: 32px;
  width: 80%;

  font-size: 16px;
  line-height: 32px;
}

.inula-datepicker-input-container-large
  .inula-datepicker-input-icon
  .inula-icon {
  font-size: 16px !important;
}

.inula-datepicker-input-container-large .inula-datepicker-input-icon .clear {
  width: 20px;
  height: 20px;
}

.inula-datepicker-input-container-large .inula-datepicker-input-icon {
  top: 20px;
}

/* variant线条边框样式 */
/* filled */
.inula-datepicker-input-container.inula-datepicker-input-container-filled {
  border: 1px solid transparent;
  background-color: #f0f0f0;
}

.inula-datepicker-input-container.inula-datepicker-input-container-filled:focus-within {
  border: 1px solid #1677ff;
  background-color: #fff;
  outline: none;
  box-shadow: none;
}

/* bordless  */
.inula-datepicker-input-container.inula-datepicker-input-container-borderless {
  border: none;
}

.inula-datepicker-input-container.inula-datepicker-input-container-borderless:focus-within {
  outline: none;
  box-shadow: none;
}

/* underline  */
.inula-datepicker-input-container.inula-datepicker-input-container-underline {
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 0;
}

.inula-datepicker-input-container.inula-datepicker-input-container-underline:focus-within {
  border-color: #1677ff;
  outline: none;
  box-shadow: none;
}

/* status 状态样式 */
/* error */
.inula-datepicker-input-container.inula-datepicker-input-container-error {
  border: 1px solid #ff4d4f;
}

.inula-datepicker-input-container.inula-datepicker-input-container-error:hover {
  border-color: #ffa39e;
}

.inula-datepicker-input-container.inula-datepicker-input-container-error:focus-within {
  box-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);
}

.inula-datepicker-input-container.inula-datepicker-input-container-error
  .inula-datepicker-input-icon
  .inula-icon {
  color: #ff4d4f !important;
}

/* 不改变清除按钮颜色 */
.inula-datepicker-input-container.inula-datepicker-input-container-error
  .inula-datepicker-input-icon
  .clear
  .inula-icon {
  color: #fff !important;
}

/* warning */
.inula-datepicker-input-container.inula-datepicker-input-container-warning {
  border: 1px solid #faad14;
}

.inula-datepicker-input-container.inula-datepicker-input-container-warning:hover {
  border-color: #ffd666;
}

.inula-datepicker-input-container.inula-datepicker-input-container-warning:focus-within {
  box-shadow: 0 0 0 2px rgba(255, 215, 5, 0.1);
}

.inula-datepicker-input-container.inula-datepicker-input-container-warning
  .inula-datepicker-input-icon
  .inula-icon {
  color: #faad14 !important;
}

.inula-datepicker-input-container.inula-datepicker-input-container-warning
  .inula-datepicker-input-icon
  .clear
  .inula-icon {
  color: #fff !important;
}

/* RangePicker */
.inula-datepicker-input-container.range-container {
  width: 300px;
}

.inula-datepicker-input.range-input {
  width: 45%;
}

/* 日历样式 */
.inula-calendar {
  position: absolute;
  z-index: 100;

  /* width: 287px !important; */
  background-color: #fff;

  display: flex;
  flex-direction: column;

  border-radius: 6px;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
    0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
}

/* 出现位置 */
.position-bottom-left {
  top: 36px;
  left: 0;
}

.position-bottom-right {
  top: 36px;
  right: 0;
}

.position-top-left {
  bottom: 36px;
  left: 0;
}

.position-top-right {
  bottom: 36px;
  right: 0;
}

/* 兼顾不同日历, 不同大小 */
/* small、default、large */
.position-bottom-left.position-small,
.position-bottom-right.position-small {
  top: 28px;
}

.position-bottom-left.position-large,
.position-bottom-right.position-large {
  top: 42px;
}

.position-top-left.position-small,
.position-top-right.position-small {
  bottom: 28px;
}

.position-top-left.position-large,
.position-top-right.position-large {
  bottom: 42px;
}

/* close */
.inula-calendar.closed {
  display: none;
}

/* 日历头部样式 */
.inula-calendar-header {
  width: calc(100% - 8px);
  height: 32px;

  padding: 4px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.inula-calendar-header-title {
  font-size: 14px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.88);
}

.range-title.inula-calendar-header-title {
  width: 65%;
  display: flex;
  justify-content: space-between;
}

/* 左右切换箭头 */
.inula-calendar-header-left {
  display: flex;
  gap: 7px;
  margin-left: 8px;
}

.inula-calendar-header-left .inula-icon:hover {
  cursor: pointer;
  color: rgba(0, 0, 0, 0.88) !important;
}

.inula-calendar-header-right {
  display: flex;
  gap: 7px;
  margin-right: 8px;
}

.inula-calendar-header-right .inula-icon:hover {
  cursor: pointer;
  color: rgba(0, 0, 0, 0.88) !important;
}

/*

日历内容样式：content 

*/
.inula-calendar-content {
  width: calc(100% - 21px);
  padding: 10.5px;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
}

/* rangpicker */
.inula-calendar-range-content {
  display: flex;
}

/* 

item通用样式 

*/
/* 容器 */
.item-container {
  width: 36px;
  height: px;

  margin: 6px 0;

  display: flex;
  justify-content: center;
  align-items: center;

  position: relative;

  transition: all 0.1s ease-in-out;
}

.item-container::before {
  content: "";

  width: 100%;
  height: 6px;

  position: absolute;
  top: -6px;
}

.item-container::after {
  content: "";

  width: 100%;
  height: 6px;

  position: absolute;
  bottom: -6px;
}

/* 

日期选择器、周选择器共用 

*/
/* 星期标签item */
.inula-calendar-content-weekday {
  height: 32px;
  line-height: 32px;
  text-align: center;
}

/* 今天选中样式 */
.inula-calendar-content-date-item.inula-calendar-content-date-item-today {
  border: 1px solid #1677ff;
  box-sizing: border-box;
}

/* 
通用hover样式，week特殊 

*/
/* 容器 */
.item-container:not(.week-container):hover {
  cursor: pointer;
}

/* item本身 */
.inula-calendar-content-date-item {
  height: 24px;
  width: 24px;
  border-radius: 6px;
  background-color: transparent;

  font-size: 14px;
  text-align: center;
  line-height: 24px;

  transition: all 0.3s ease-in-out;
}

/* item本身，selected时不生效 */
.item-container:not(.week-container):hover
  .inula-calendar-content-date-item:not(
    .inula-calendar-content-date-item-selected
  ) {
  background-color: #f5f5f5;
  cursor: pointer;
}

/* rangepicker的hover样式 */
.inula-calendar-content.inula-range-calendar-content
  .item-container:not(.week-container, .item-container-disabled):hover
  .inula-calendar-content-date-item:not(
    .inula-calendar-content-date-item-notThisTitleRange
  ) {
  color: #fff;
  background-color: #1677ff;
}

/* 通用非标题范围样式 */
.inula-calendar-content-date-item.inula-calendar-content-date-item-notThisTitleRange {
  color: rgba(0, 0, 0, 0.25);
}

/* 通用select样式 */
.inula-calendar-content-date-item.inula-calendar-content-date-item-selected {
  color: #fff;
  background-color: #1677ff;
}

.inula-calendar-content-date-item.inula-calendar-content-date-item-selected:hover {
  color: #fff;
  background-color: #1677ff;
}

/* 

通用disabled样式，week特殊 

*/
/* 容器 */
.item-container:not(.week-container).item-container-disabled {
  background-color: #f5f5f5;
}

.item-container:not(.week-container).item-container-disabled:hover {
  cursor: not-allowed;
}

/* item本身 */
.item-container:not(.week-container).item-container-disabled
  .inula-calendar-content-date-item:hover {
  cursor: not-allowed;
}

.inula-calendar-content-date-item.inula-calendar-content-date-item-disabled {
  background-color: #f5f5f5;
  color: #b8b8b8;
  border-color: #b8b8b8;
}

.inula-calendar-content-date-item.inula-calendar-content-date-item-disabled:hover {
  background-color: #f5f5f5;
  color: #b8b8b8;
  cursor: not-allowed;
}

/* 周选择器 */
.inula-calendar-content-week-row-header {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  border-radius: 6px;
}

.inula-calendar-content-week-row {
  height: 24px;
  border-radius: 6px;

  margin: 4px 0;

  line-height: 32px;
  text-align: center;
  grid-column: 1;

  display: flex;
  justify-content: space-around;
  align-items: center;
}

/* hover */
.inula-calendar-content-week-row:hover {
  color: #fff;
  background-color: #1677ff;
  cursor: pointer;
}

.inula-calendar-content-week-row:hover .inula-calendar-content-date-item {
  color: #fff;
}

.inula-calendar-content-week-row .inula-calendar-content-date-item:hover {
  background-color: #1572f5;
}

/* 选中 */
.inula-calendar-content-week-row.inula-calendar-content-week-row-selected {
  color: #fff;
  background-color: #1677ff;
}

.inula-calendar-content-week-row.inula-calendar-content-week-row-selected
  .inula-calendar-content-date-item {
  color: #fff;
}

/* 禁用 */
.inula-calendar-content-week-row.inula-calendar-content-week-row-disabled,
.inula-calendar-content-week-row.inula-calendar-content-week-row-disabled
  .inula-calendar-content-date-item,
.inula-calendar-content-week-row.inula-calendar-content-week-row-disabled:hover,
.inula-calendar-content-week-row.inula-calendar-content-week-row-disabled:hover
  .inula-calendar-content-date-item,
.inula-calendar-content-week-row.inula-calendar-content-week-row-disabled
  .inula-calendar-content-date-item:hover {
  background-color: #f5f5f5;
  color: #b8b8b8;
  border-color: #b8b8b8;
}

.inula-calendar-content-week-row.inula-calendar-content-week-row-disabled:hover {
  cursor: not-allowed;
}

/* 月选择器 */
.item-container.month-container {
  height: 24px;
  width: 88px;

  margin: 18px 0;
}

.item-container.month-container::before {
  height: 18px;
  top: -18px;
}

.item-container.month-container::after {
  height: 18px;
  bottom: -18px;
}

.item-container.month-container .inula-calendar-content-date-item {
  height: 24px;
  width: 64px;
}

/* 季度选择器 */
.item-container.quarter-container {
  height: 24px;
  width: 68px;

  margin: 10px 0;
}

.item-container.quarter-container::before {
  height: 24px;
  top: -24px;
}

.item-container.quarter-container::after {
  height: 24px;
  bottom: -24px;
}

.item-container.quarter-container .inula-calendar-content-date-item {
  height: 24px;
  width: 56px;
}

/* 年选择器 */
.item-container.year-container {
  height: 24px;
  width: 88px;

  margin: 18px 0;
}

.item-container.year-container::before {
  height: 18px;
  top: -18px;
}

.item-container.year-container::after {
  height: 18px;
  bottom: -18px;
}

.item-container.year-container .inula-calendar-content-date-item {
  height: 24px;
  width: 64px;
}

/* rangepicker在范围内item样式 */
.item-container.item-container-in-range {
  background-color: #e6f4ff;
}

/* 非title范围 */
.inula-calendar-content-year-item.inula-calendar-content-year-item-notThisTitleRange {
  color: rgba(0, 0, 0, 0.25);
}

/* 日历底部样式 */
.inula-calendar-footer {
  width: calc(100% - 16px);
  height: 40px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);

  padding: 8px;

  display: flex;
  align-items: center;
}

.inula-calendar-footer-today {
  font-size: 14px;
  color: #1677ff;
}

.inula-calendar-footer-today:hover {
  color: #69b1ff;
  cursor: pointer;
}

.inula-calendar-footer-confirm {
  width: 64px;
  height: 32px;
}

/* 通用类名 */
.flex-middle-box {
  display: flex;
  justify-content: center;
  align-items: center;
}
